<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        background-color: #f1f3f4;
        color: gray;
        width: 400px;
        margin: auto;
        margin-top: 100px;
        line-height: 50px;
        text-align: center;
        border:gray;
        border-radius: 10px;
        border-color: gray;
        box-shadow:10px 10px 20px 10px #767676;
    }
    #loginBtn{
        border: 1px solid #398dee;
        width: 60%;
        height:38px;
        background-color: #398dee;
        border-radius: 20px;
    }
    #zc{
        text-decoration: none;
        color: #398dee;
    }
</style>

<body>
    <div class="box">
        <h1>明德软件系统_Ajax</h1>
        <p>
            帐号： <input type="text" name="username" id="username">
        </p>
        <p>
            密码： <input type="password" name="password" id="password">
        </p>
        <p>
            <button id="loginBtn">登录</button><br>
            还没有帐号?去<a href="/register" id="zc">注册</a> 
        </p>

        <div id="message">

        </div>
    </div>
</body>
<script>
    let userEle = document.getElementById('username');
    let pwdEle = document.getElementById('password');
    let loginBtnEle = document.getElementById('loginBtn');
    let msgEle = document.getElementById('message');

    //1. 绑定单击事件
    loginBtnEle.onclick = function () {
        // 单击事件做的事情
        //2. 获取用户名和密码
        let username = userEle.value;
        let password = pwdEle.value;
        //3. 基本信息基本校验
        //1. 用户名最少6位，不能包含特殊字符
        let usernameReg = /^[a-zA-Z0-9]{6,}$/;
        if (!usernameReg.test(username)) {
            msgEle.innerHTML = '<span class="error">用户名最少6位，不能包含特殊字符</span>'
            return false;
        }

        //2. 密码不能少于8位
        let pwdReg = /^.{6,}$/;
        if (!pwdReg.test(password)) {
            msgEle.innerHTML = '<span class="error">密码不能少于8位</span>'
            return false;
        }

        msgEle.innerHTML = '';
        // 防止用户频繁按钮，对服务器造成一定的压力
        loginBtnEle.setAttribute('disabled', 'disabled')
        loginBtnEle.innerText = "登录中.."
        //4. 校验成功发送ajax请求，到服务器进行验证匹配
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                console.log(this.responseText)
                let data = JSON.parse(this.responseText)
                loginBtnEle.removeAttribute('disabled')
                loginBtnEle.innerText = "登录"
                let { code, message } = data;
                if (code == '20000') {
                    alert('登录成功')
                    location.href = "/";
                } else {
                    alert('用户名或密码失败')
                }
            }
        }
        xhr.open('post', '/ajaxlogin', true)
        // post要设置请求头content-type,模拟post表单来传递数据
        xhr.setRequestHeader("Content-type", 'application/x-www-form-urlencoded');
        username = encodeURIComponent(username);
        password = encodeURIComponent(password);
        let formdata = `username=${username}&password=${password}`;
        xhr.send(formdata)
    }

</script>

</html>